<template>
	<view>
		<view class="">
			<custom-navbar title="机构简介" :showBack="true"></custom-navbar>
		</view>
		<view class="bg">

			<!-- 使用banner组件 -->
			<banner :bannerList="banner"></banner>
			<!-- 使用机构信息组件 -->
			<!-- <agency-info :agencyId="agencyId"></agency-info> -->
			<view class="institutional">
				<view class="institutional-profile">
					<!-- 机构标准介绍 start -->
					<view class="ntroduction-standards">
						<!-- 服务类型 start -->
						<view class="ntroduction-standards-one">
							<view class="ntroduction-standards-one-title">
								<view class="ntroduction-standards-one-title-img">
									<image class="ntroduction-standards-one-title-img-img"
										src="/static/agency/vertical.png" mode=""></image>
								</view>
								<view class="ntroduction-standards-one-title-title">
									服务类型：
								</view>
							</view>
							<view class="ntroduction-standards-one-text">
								{{instDetails.type}}
							</view>
						</view>
						<!-- 服务类型 end -->
						<!-- 成立背景 start -->
						<view class="ntroduction-standards-one">
							<view class="ntroduction-standards-one-title">
								<view class="ntroduction-standards-one-title-img">
									<image class="ntroduction-standards-one-title-img-img"
										src="/static/agency/vertical.png" mode=""></image>
								</view>
								<view class="ntroduction-standards-one-title-title">
									成立背景：
								</view>
							</view>
							<view class="ntroduction-standards-one-text">
								{{instDetails.background}}
							</view>
						</view>
						<!-- 成立背景 end -->
						<!-- 服务范围与形式 start -->
						<view class="ntroduction-standards-one">
							<view class="ntroduction-standards-one-title">
								<view class="ntroduction-standards-one-title-img">
									<image class="ntroduction-standards-one-title-img-img"
										src="/static/agency/vertical.png" mode=""></image>
								</view>
								<view class="ntroduction-standards-one-title-title">
									服务范围
								</view>
							</view>
							<view class="ntroduction-standards-one-text">
								<view>
									{{instDetails.servicetype}}
								</view>

							</view>
						</view>
						<!-- 服务范围与形式 end -->
						<!-- 服务领域 start -->
						<view class="ntroduction-standards-one">
							<view class="ntroduction-standards-one-title">
								<view class="ntroduction-standards-one-title-img">
									<image class="ntroduction-standards-one-title-img-img"
										src="/static/agency/vertical.png" mode=""></image>
								</view>
								<view class="ntroduction-standards-one-title-title">
									服务领域：
								</view>
							</view>
							<view class="ntroduction-standards-one-text">
								<view>
									{{instDetails.servicecrowd}}
								</view>


							</view>
						</view>
						<!-- 服务领域 end -->
						<!-- 专业资质 start -->
						<view class="ntroduction-standards-one">
							<view class="ntroduction-standards-one-title">
								<view class="ntroduction-standards-one-title-img">
									<image class="ntroduction-standards-one-title-img-img"
										src="/static/agency/vertical.png" mode=""></image>
								</view>
								<view class="ntroduction-standards-one-title-title">
									资质：
								</view>
							</view>
							<view class="ntroduction-standards-one-text">
								<view v-for="item in instDetails.qualified" :key="item.id" class="">
									{{item.name}}
								</view>


							</view>
						</view>
						<!-- 专业资质 end -->
					</view>
					<!-- 机构标准介绍 end -->
					<!-- 详细介绍 start -->
					<view class="detailed-introduction">
						<view class="detailed-introduction-title">
							详细介绍
						</view>
						<view class="detailed-introduction-text">

							<view class="detailed-introduction-text-title">
								{{instDetails.readme}}
							</view>
						</view>
					</view>
					<!-- 详细介绍 end -->
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import banner from '@/components/banner/banner.vue';
	import agencyInfo from '@/components/agency-info/agency-info.vue';
	import customNavbar from '../../components/custom-navbar/custom-navbar.vue';
	import {
		getAgencDetails
	} from '../../api/api.js'
	export default {
		components: {
			banner,
			agencyInfo,
			customNavbar
		},
		data() {
			return {
				// 轮播图数据
				banner: [],
				// 机构ID
				agencyId: '',
				instDetails: {},
			}
		},
		onLoad(options) {
			// 从页面地址获取id参数
			this.agencyId = options.id || '';
			this.getAgencDetailsData(this.agencyId);
		},
		methods: {
			/**
			 * 获取机构详情数据
			 */
			getAgencDetailsData(id) {
				getAgencDetails(id).then(res => {
					this.instDetails = res || [];
					this.banner = res.img || []
				}).catch(error => {
					this.instDetails = [];
				});
			},

		}
	}
</script>

<style>
	.bg {
		width: 750rpx;
		height: 100%;
		background-color: #F8F8F8;
		margin-top: 194 rpx;
	}

	/* banner导航  start*/
	.banner-model {
		width: 750rpx;
		height: 465rpx;

	}

	.banner {
		width: 750rpx;
		height: 470rpx;
		display: inline-block;
		overflow: hidden;
	}

	.banner .banner-img {
		width: 100%;
	}

	/* banner导航  end*/
	.institutional {
		/* position: relative; */
		width: 750rpx;
		/* height: 700rpx; */
		margin: 0rpx auto;
		display: flex;
		align-items: flex-start;
		/* 交叉轴顶部对齐 */
		justify-content: center
	}

	.institutional-profile {
		/* position: absolute;
		top: -65rpx;
		left: 50%;
		transform: translateX(-50%); */
		margin-top: -75rpx;
		/* 视觉上移 */
		z-index: 100;

	}

	/* 机构信息样式 start */
	.other-bpx {
		width: 750rpx;
		padding: 0rpx 15rpx;
	}

	.information {
		width: 725rpx;
		background-color: #fff;
		border-radius: 25rpx;
		transform: translateY(-80rpx);
		display: flex;
		overflow: hidden;
		padding: 25rpx;
		box-sizing: border-box;

	}

	.information-left {
		width: 620rpx;
		height: 100%;

	}

	.information-right {
		width: 100rpx;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

	}

	/* 中间悬浮盒子样式  start*/
	.information-left-title {
		font-size: 35rpx;
		padding: 5rpx;
		color: black;
		padding: 20rpx 10rpx;
		font-weight: 600;

	}

	.information-left-box {
		width: 100%;
		display: flex;
		padding: 30rpx 0rpx;
	}

	.information-left-box-img {
		width: 40rpx;
		height: 40rpx;
		padding-right: 15rpx;

	}

	.information-left-box-img-img-padding {
		padding: 20rpx 10rpx 0rpx 0rpx;
	}

	.information-left-box-img-img {
		width: 40rpx;
		height: 100%;

	}

	.information-right-img {
		width: 60rpx;
		height: 33.33%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.information-right-img-img {
		width: 60rpx;
		height: 60rpx;
	}

	/* 机构信息样式 end */
	/* 机构标准介绍 start */
	.ntroduction-standards {
		width: 720rpx;
		background-color: #fff;
		margin: 0rpx auto;
		border-radius: 25rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 25rpx 15rpx;

	}

	.ntroduction-standards-one {
		width: 100%;

	}

	.ntroduction-standards-one-title {
		height: 100rpx;
		display: flex;
		box-sizing: border-box;
		padding: 34rpx 20rpx;

	}

	.ntroduction-standards-one-title-img {
		margin-top: 10rpx;
		width: 35rpx;
	}

	.ntroduction-standards-one-title-img-img {
		width: 36rpx;
		height: 40rpx;
	}

	.ntroduction-standards-one-title-text {
		width: 620rpx;
	}

	.ntroduction-standards-one-title-title {
		font-size: 40rpx;
		font-weight: 540;
	}

	.ntroduction-standards-one-text {
		line-height: 76rpx;
		font-size: 30rpx;
		color: #000;
		padding: 10rpx 45rpx;
		border-bottom: 1rpx solid #9A9A9A;
	}

	.blok-wight {
		color: #000;
		font-weight: 600;
	}

	/* 机构标准介绍 end */
	/* 机构详细介绍 start */
	.detailed-introduction {
		width: 720rpx;
		background-color: #fff;
		margin: 35rpx auto 10rpx;
		border-radius: 25rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 22rpx 35rpx;
		/* border: 1rpx solid #9A9A9A; */
	}

	.detailed-introduction-title {
		padding: 10rpx 0rpx 25rpx;
		font-size: 45rpx;
		font-weight: 540;
	}

	.detailed-introduction-text-title {
		font-size: 35rpx;
		line-height: 60rpx;
		padding: 30rpx 20rpx;
	}

	/* 机构详细介绍 end */
	/* 咨询师列表 start */
	.counselor-list {
		width: 720rpx;
		background-color: #fff;
		margin: 60rpx auto 10rpx;
		border-radius: 25rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx 15rpx;
	}

	.counselor-list-title {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 20rpx;
		margin: 0rpx 0rpx 45rpx;
	}

	.counselor-list-title-tile {
		font-size: 45rpx;
		font-weight: 600;
	}

	.counselor-list-title-statistics {
		font-size: 30rpx;
		color: #9A9A9A;
	}

	.counselor-list-title-one {
		border-radius: 35rpx;
		border: 1px solid #9A9A9A;
		display: flex;
		justify-content: flex-start;
		padding: 15rpx;
	}

	.counselor-list-title-one-left {
		width: 155rpx;
		height: 295rpx;
		background-color: #F4CE98;
		opacity: 0.25rpx;
		border-radius: 25rpx;
		overflow: hidden;
	}

	.counselor-list-title-one-left-img {
		width: 155rpx;
		height: 195rpx;
	}

	.counselor-list-title-one-left-img-img {
		width: 155rpx;
		height: 195rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
	}

	.counselor-list-title-one-left-annual {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 10rpx;
	}

	.counselor-list-title-one-left-annual-inc {
		width: 30rpx;
		height: 30rpx;
		margin: 5rpx;
	}

	.counselor-list-title-one-left-annual-inc-img {
		width: 30rpx;
		height: 30rpx;
	}

	.counselor-list-title-one-left-annual-title {
		font-size: 31rpx;
		color: #9B7D31;
		font-weight: 600;
	}

	.counselor-list-title-one-right {
		width: 510rpx;
		padding: 0rpx 0rpx 0rpx 20rpx;
	}

	.counselor-list-title-one-right-top {
		height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.counselor-list-title-one-right-top-name {
		font-size: 40rpx;
		font-weight: 600;
	}

	.counselor-list-title-one-right-top-method {
		font-size: 20rpx;
		color: #9A9A9A;
		padding: 20rpx 5rpx 5rpx;
		width: 150rpx;
	}

	.counselor-list-title-one-right-top-position {
		display: flex;
		padding: 10rpx 0rpx 0rpx;
	}

	.counselor-list-title-one-right-top-position-icn {
		width: 25rpx;
		height: 25rpx;
	}

	.counselor-list-title-one-right-top-position-icn-img {
		width: 25rpx;
		height: 25rpx;
	}

	.counselor-list-title-one-right-top-position-name {
		font-size: 25rpx;
		color: #9A9A9A;
	}

	.counselor-list-title-one-right-center-title {
		font-size: 25rpx;
		padding: 5rpx 0rpx;
	}

	.counselor-list-title-one-right-down {
		display: flex;
		justify-content: flex-end;
		padding: 10rpx 0rpx 5rpx;
	}

	.counselor-list-title-one-right-down-price {
		font-size: 30rpx;
		color: #A16222;
		font-weight: 600;
		padding: 13rpx 15rpx 0rpx;
	}

	.price-icon {
		font-size: 20rpx;
		padding: 10rpx 0rpx 0rpx;
	}

	.counselor-list-title-one-right-down-button {
		padding: 15rpx 25rpx;
		background-color: #A16222;
		color: #fff;
		border-radius: 30rpx;
		margin-left: 15rpx;

	}

	/* 咨询师列表 end */
</style>